<!-- 这是问卷库管理表格 -->
<template>
    <div id="center-info" v-show="this.str === '问卷库管理'">
                <el-table
                    border
                    :data="ManageLibraryData1.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    style="width: 100%;font-size: 10px;"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    >

                    <el-table-column
                    prop="quest_name"
                    width="250px"
                    label="问卷名称">
                    </el-table-column>

                    <el-table-column
                    prop="quest_describe"
                    width="250px"
                    label="文件描述">
                    </el-table-column>

                    <el-table-column
                      prop="create_time"
                      width="250px"
                      label="创建时间"
                      sortable>
                    </el-table-column>

                    <el-table-column
                    width="272px"
                    label="操作"
                    >
                    <template slot-scope="scope">
                            <el-button type ="text" size="small" @click="runlookinfo(scope.row.quest_invest_id,scope.row.quest_name)">查看</el-button>
                            <el-button type ="text" size="small" @click="runcompileinfo(scope.row.quest_invest_id,scope.row.quest_name)">编辑</el-button>
                            <el-button type ="text" size="small">复制问卷</el-button>
                            <el-button type ="text" size="small" @click="open">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>

          <div style="margin: 10px;text-align: center">
            <el-pagination
              :currentPage="currentPage"
              :page-size="pageSize"
              :page-sizes="[5, 10, 20]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
    </div>
</template>
<script>
import request from "../../../utils/request";

export default {
    props:[
        "str",
        "text"
    ],
    created() {
        this.select();
    },
    data() {
        return {
            num:0,
            lists:{},
            currentPage:1,
            total:10,
            pageSize:10,
            search:'',
            ManageLibraryData :[{
                name:'2020届毕业生就业意向调研',
                startdate:'2020-02-20'
            },
            {
                name:'毕业生岗位变动调研',
                startdate:'2020-01-03'
            },
            {
                name:'毕业工作反馈',
                startdate:'2020-01-03'
            },
            {
                name:'2020届毕业生就业意向调研',
                startdate:'2020-02-20'
            },
            {
                name:'毕业生岗位变动调研',
                startdate:'2020-01-03'
            },
            {
                name:'毕业工作反馈',
                startdate:'2020-01-03'
            },
            {
                name:'毕业工作反馈',
                startdate:'2020-01-03'
            },{
                name:'毕业工作反馈',
                startdate:'2020-01-03'
            }],
            dialogVisible: false
        }
    },
    mounted() {
        this.search = this.text
    },
    watch:{
        text:{
            // 监听数据发生变化的处理函数
            handler(newV){
                this.search = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
                this.select()
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        },
    },
    computed:{
        ManageLibraryData1:function(){
            var lists = this.lists;
            if(this.search==""){
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.total = lists.length
                return lists;
            }
            var search = this.search.trim().toLowerCase();
            lists = lists.filter(function(ele){
                if(ele.quest_name.toLowerCase().indexOf(search) != -1){
                    return ele;
                }
            });
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.total = lists.length
            return lists;
        },
    },
    methods: {
        select(){
            request.post("/questinvest/selectQuestinvest").then(res => {
                this.lists = res;
                this.total = this.lists.length
            })
        },
        // formatter(row, column) {
        //     return row.startdate;
        // },
        runcompileinfo(quest_invest_id,quest_name){
            this.$router.push({path:"/compile",query: { id: "编辑" ,lookername : quest_name,quest_invest_id : quest_invest_id}})

        },
        runlookinfo(quest_invest_id,quest_name){
            // console.log(this.ManageLibraryData[i].name+"1")
            this.$router.push({path:"/wjklook",query: { id: "查看" ,lookername : quest_name,quest_invest_id : quest_invest_id}})

        },
        open() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    FontSize : "12px",
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSizeChange(pageSize){
            this.pageSize = pageSize
            this.select(this.num)
        },
        handleCurrentChange(currentPage){
            this.currentPage = currentPage
            this.select(this.num)
        },
    },
}
</script>
<style>
.delete-tip .el-dialog__header {
    padding: 20px 0 0 20px;
    height: 54px;
    border-bottom: solid 2px #f2f2f2;
}
.delete-tip .el-dialog__header span{
    display: block;
}
.delete-tip .el-dialog__body {
    padding: 35px 0 0 20px;
}
.delete-tip .el-dialog__footer {
    text-align: left;
    padding: 0 0 10px 20px;
}
.el-message__icon{
    font-size: 14px;
}

</style>
